<!--
  tree组件：
      Attributes:
          1、btns: [],        右侧操作图标(level表示层级，当前图标只能在第几层显示)
                [
                  { svg: 'xinzengquyuicon_wei', event: 'add', level: [1] },
                  { svg: 'bianjiquyuicon_wei', event: 'edit', level: [2] },
                  { svg: 'shanchuquyuicon_wei', event: 'del', level: [2] }
                ]
          2、showSearch        是否显示搜索框
          3、delText           删除文本的提示信息
          4、其他所有入参，请参照 element-ui 官网

      Events：
          1、nodeClick     节点点击
          2、check         复选框多选

      Demo：
          <div style="width: 200px; height: 200px">
            <z-tree
              :data="treeData.list"
              :defaultProps="{
                children: 'children',
                label: 'label'
              }"
              default-expand-all
              show-checkbox
              :showSearch="true"
              @nodeClick="nodeClick"
              @check="check"
            ></z-tree>
          </div>

          treeData: [
            {
              id: 1,
              label: '一级 1',
              children: [
                {
                  id: 4,
                  label: '二级 1-1',
                  children: [
                    {
                      id: 9,
                      label: '三级 1-1-1'
                    },
                    {
                      id: 10,
                      label: '三级 1-1-2'
                    }
                  ]
                }
              ]
            },
            {
              id: 2,
              label: '一级 2',
              children: [
                {
                  id: 5,
                  label: '二级 2-1'
                },
                {
                  id: 6,
                  label: '二级 2-2'
                }
              ]
            }
          ]

          // 点击
          nodeClick(data) {
            console.log(111, data)
          },

          // 多选
          check(keysArr, nodesArr) {
            console.log(222, keysArr)
            console.log(333, nodesArr)
          }
-->
<template>
  <div class="z-tree">
    <el-input v-if="showSearch" v-model="filterText" :placeholder="$attrs.placeholder || '请输入关键字'" :prefix-icon="Search" clearable> </el-input>
    <div class="tree-box" :style="{ height: showSearch ? 'calc(100% - 32px)' : '100%', padding: showSearch ? '10px 0' : 0 }">
      <el-tree
        ref="tree"
        class="scrollbar"
        :data="myAttrs.data"
        :default-expand-all="myAttrs['default-expand-all']"
        :node-key="myAttrs['node-key'] || 'id'"
        :show-checkbox="myAttrs['show-checkbox']"
        :default-checked-keys="myAttrs['default-checked-keys']"
        :props="myAttrs.defaultProps"
        :filter-node-method="filterNode"
        @node-click="nodeClick"
        @check="check"
      >
        <template #default="{ node, data }">
          <div class="custom-tree-node" :class="node.isCurrent ? 'isCustomChecked' : ''">
            <div class="text">
              <input v-model="data[myAttrs.defaultProps.label]" readonly />
            </div>
            <ul class="btns" v-if="btns.length">
              <li v-for="(btnItem, i) in btns" :key="i" v-show="btnItem.level.includes(node.level)">
                <z-delToast v-if="btnItem.svg === 'tree-delete'" :text="delText" @sure="btnClick(btnItem.event, data)">
                  <z-svg :name="btnItem.svg"></z-svg>
                </z-delToast>
                <z-svg v-else :name="btnItem.svg" @click.stop="btnClick(btnItem.event, data)"></z-svg>
              </li>
            </ul>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, watch, defineComponent } from 'vue'
import { Search } from '@element-plus/icons-vue'
export default defineComponent({
  name: 'z-tree',
  inheritAttrs: false,
  props: {
    btns: {
      type: Array as () => Array<any>,
      default: () => []
    },
    showSearch: {
      type: Boolean,
      default: false
    },
    delText: {
      type: String,
      default: '确认删除该区域吗？'
    }
  },
  setup(props, { emit, attrs }) {
    const myAttrs: any = attrs
    const tree = ref()
    const filterText = ref<string>('') // 搜索关键字
    watch(filterText, val => tree.value.filter(val))

    // 单击
    function nodeClick(data: any) {
      console.log('--当前点击项信息--', data)
      emit('nodeClick', data)
    }

    // 复选框所选
    function check(item: any, obj: any) {
      console.log('--选中的id数组--', obj.checkedKeys)
      console.log('--选中的所有数据数组--', obj.checkedKeys)
      emit('check', obj.checkedKeys, obj.checkedNodes)
    }

    // 点击右侧的操作icon图标
    function btnClick(eventName: string, data: any) {
      emit(eventName, data)
    }

    // 清空多选
    function clearSelect() {
      tree.value.setCheckedNodes([])
    }

    // 模糊搜索
    function filterNode(value: string, data: any) {
      if (!value) return true
      return data[myAttrs.defaultProps.label].indexOf(value) !== -1
    }
    return { Search, myAttrs, tree, filterText, nodeClick, check, btnClick, clearSelect, filterNode }
  }
})
</script>

<style lang="scss" scoped>
.z-tree {
  height: 100%;
}
</style>
